import React, { PureComponent } from 'react';
import { Row, Col, message, Form } from 'antd';
import {
    getCityThirdPartyByPage
} from '@/services/city';
import FormModal from './business/FormModal';
import auth from '@/utils/auth';

const formItemLayout = {
    labelCol: { span: 9 },
    wrapperCol: { span: 8 },
};
@Form.create({})
class ThirdParty extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            inputConfig: [
                {
                    type: 'input',
                    name: 'id',
                    hidden: true,
                },
                {
                    type: 'input',
                    name: 'cityCode',
                    hidden: true,
                },
                {
                    type: 'select',
                    placeholder: '请选择官网类别',
                    name: 'grabType',
                    label: '官网类别',
                    optionList: { list: [{ name: '社保', value: '0' }, { name: '公积金', value: '1' }] },
                    selectProps: {
                        allowClear: true,
                        showSearch: true
                    }
                },
                {
                    type: 'select',
                    placeholder: '请选择开通状态',
                    name: 'thirdStatus',
                    label: '开通状态',
                    optionList: { list: [{ name: '关闭', value: '0' }, { name: '开通', value: '1' }] },
                    selectProps: {
                        allowClear: true,
                    }
                },
                {
                    type: 'select',
                    placeholder: '请选择官网信息来源',
                    name: 'thirdType',
                    label: '官网信息来源',
                    optionList: { list: [{ name: '网站', value: '0' }, { name: '小程序', value: '1' }] },
                    selectProps: {
                        allowClear: true,
                    }
                },
                {
                    type: 'input',
                    placeholder: '请输入内容标题',
                    name: 'thirdSpare1',
                    label: '内容标题',
                },
                {
                    type: 'input',
                    placeholder: '请输入城市地址',
                    name: 'thirdParty',
                    label: '城市地址',
                },
                {
                    type: 'editor',
                    placeholder: '请输入内容详情',
                    name: 'thirdMessage',
                    label: '内容详情',
                }
            ]
        }
        this.getCityThirdPartyByPage({ cityCode: props.record.cityCode })
    }
    refreshInputConfig(newData) {
        if (auth.isUndef(newData)) return;
        const { inputConfig } = this.state;
        const tempData = inputConfig.map((config) => {
            config.initialValue = newData[config.name];
            return config;
        })
        this.setState({
            inputConfig: tempData
        })
    };
    async getCityThirdPartyByPage(params) {
        if (auth.isUndef(params.cityCode)) return;
        let defaultData = { cityCode: params.cityCode };
        const dataObj = await getCityThirdPartyByPage(params);
        if (dataObj && dataObj.code === '000000' && dataObj.data !== null) {
            defaultData = { ...defaultData, ...dataObj.data[0] }
        }
        this.refreshInputConfig(defaultData);
    };
    render() {
        const { inputConfig } = this.state;
        const { record, $ref } = this.props;
        return <div>
            <Row>
                <Col span={5}>
                    <Form.Item label="城市名称:" {...formItemLayout}>
                        {record.cityName}
                    </Form.Item>
                </Col>
                <Col span={5}>
                    <Form.Item label="城市代码:" {...formItemLayout}>
                        {record.cityCode}
                    </Form.Item>
                </Col>
            </Row>
            <FormModal defaultData={inputConfig} wrappedComponentRef={$ref} />
        </div>

    }
}
export default ThirdParty;